<template>
  <div class="body_card" id="test1" style="margin-top:0px">
    <el-card style="border-radius: 10px">
      <span>
        <b>数据概况</b>
      </span>
      <div
        style="
          text-align: center;
          justify-content: center;
          display: flex;
          margin-bottom: 30px;
          margin-top: 20px;
        "
      >
        <el-col :span="5">
          <el-card
            class="card1"
            shadow="hover"
            style="height:100px; margin-right:20px; margin-left:20px color:#e76f51"
          >
            <span style="color: #ffffff">今日员工签到数</span>
            <h2 style="color: #ffffff; margin-top: 10px">1234</h2>
          </el-card>
        </el-col>
        <el-col :span="5">
          <el-card
            class="card2"
            shadow="hover"
            style="height: 100px; margin-right: 20px; margin-left: 20px"
          >
            <span style="color: #ffffff">今日订单数</span>
            <h2 style="color: #ffffff; margin-top: 10px">{{ res.data.student_count }}</h2>
          </el-card>
        </el-col>
        <el-col :span="5">
          <el-card
            class="card3"
            shadow="hover"
            style="height: 100px; margin-right: 20px; margin-left: 20px"
          >
            <span style="color: #ffffff">今日营业额</span>
            <h2 style="color: #ffffff; margin-top: 10px">{{ res.data.today_access_count }}</h2>
          </el-card>
        </el-col>
        <el-col :span="5">
          <el-card
            class="card4"
            shadow="hover"
            style="height: 100px; margin-right: 20px; margin-left: 20px"
          >
            <span style="color: #ffffff">本月营业额数</span>
            <h2 style="color: #ffffff; margin-top: 10px">{{ res.data.month_access_count }}</h2>
          </el-card>
        </el-col>
      </div>
    </el-card>
    <el-card class="body_card">
      <span>
        <b>接送记录</b>
      </span>
      <el-row style="margin-top: 20px">
        <el-col :span="8" v-for="(item, index) in res.data.accessList" :key="index">
          <el-col :span="4">
            <img src="../assets/images/shoyeimg1.jpg" width="60px" height="60px" />
          </el-col>
          <el-col :span="16" style="margin-left: 20px">
            <div class="box">
              <div class="content1" style="font-size: 18px">
                <b>{{ item.name }}</b>
              </div>
              <div
                class="content2"
                style="font-size: 13px; margin-top: 10px"
              >{{ item.date == "" ? "待完善" : item.date }}</div>
              <div
                class="content3"
                style="font-size: 13px; margin-top: 5px"
              >{{ item.device == "2" ? "人脸机" : item.device }}</div>
            </div>
          </el-col>
          <el-col :span="2" style="height: 60px">
            <el-divider class="fengexian" direction="vertical" style="height: 60px"></el-divider>
          </el-col>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="body_card">
      <span>
        <b>进出记录</b>
      </span>
      <el-row style="margin-top: 20px">
        <el-col :span="8" v-for="(item, index) in res.data.pickupList" :key="index">
          <el-col :span="4">
            <img src="../assets/images/shoyeimg1.jpg" width="60px" height="60px" />
          </el-col>
          <el-col :span="16" style="margin-left: 20px">
            <div class="box">
              <div class="content1" style="font-size: 18px">
                <b>{{ item.guardianName }}</b>
              </div>
              <div class="content2" style="font-size: 13px; margin-top: 10px">{{ item.date }}</div>
              <div class="content3" style="font-size: 13px; margin-top: 5px">{{ item.device }}</div>
            </div>
          </el-col>
          <el-col :span="2" style="height: 60px">
            <el-divider class="fengexian" direction="vertical" style="height: 60px"></el-divider>
          </el-col>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="body_card">
      <span>
        <b>通行人次</b>
      </span>
      <el-radio-group v-model="type" size="small" @change="changeType" style="float: right; margin-right:120px; margin-top:20px">
        <el-radio-button label="1">本周</el-radio-button>
        <el-radio-button label="2">本月</el-radio-button>
      </el-radio-group>
      <div v-bind:type="type" ref="main" style="width: 100%; height: 400px; margin-top:20px" />
    </el-card>
  </div>
</template>
<script>
import{listIndex} from "@/api/shouye"
export default {
  name: "ShouYe",
  //组件创建
  created() {
    //this.getList();
  },
  mounted() {
    this.initEcharts();
  },
  data() {
    return {
      //所有数据
      type: "1",
      res: {
        data: {
          today_access_count: 0,
          month_day_count: [
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
          ],
          student_count: 7,
          month_access_count: 0,
          createTime: "2022-01-18-10-40",
          accessList: [
            {
              name: "张三",
              photo_url: null,
              number: null,
              device: "2",
              clazz: null,
              deviceId: null,
              type: null,
              date: "2022-01-12 09:21:12",
            },
            {
              name: "王翠花",
              photo_url: null,
              number: null,
              device: "2",
              clazz: null,
              deviceId: null,
              type: null,
              date: "2022-01-15 18:06:38",
            },
            {
              name: "赵武",
              photo_url: null,
              number: null,
              device: "2",
              clazz: null,
              deviceId: null,
              type: null,
              date: "2022-01-13 11:48:10",
            },
          ],
          week_day_count: [0, 0],
          pickupList: [
            {
              guardianName: "赵朗豪",
              photoUrl: null,
              studentName: null,
              device: "人脸机",
              date: "2022-01-05 21:56:14",
              deviceId: null,
              phone: null,
              clazz: null,
              cardId: null,
              type: null,
            },
            {
              guardianName: "王大冶",
              photoUrl: null,
              studentName: null,
              device: "人脸机",
              date: "2022-01-08 11:14:30",
              deviceId: null,
              phone: null,
              clazz: null,
              cardId: null,
              type: null,
            },
            {
              guardianName: "李志希",
              photoUrl: null,
              studentName: null,
              device: "123",
              date: "2022-01-17 11:29:07",
              deviceId: null,
              phone: null,
              clazz: null,
              cardId: null,
              type: null,
            },
          ],
          status: "sccuess",
        },
      },
    };
  },
  methods: {
    //查询数据 
    getList() {
      this.loading = true;
      listIndex(this.queryParams).then((response) => {
        this.res.data = response.data;
        this.loading = false;
      });
    },
    //当选框选择值进行改变
    changeType(value) {
      console.log("当前选中:" + value);
      this.type = value;
      this.initEcharts();
    },
    initEcharts() {
      var myChart = this.$echarts.init(this.$refs.main);
      var option;
      if (this.type == 1) {
        option = {
          xAxis: {
            type: "category",
            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          },
          yAxis: {
            type: "value",
          },
          series: [
            {
              data: this.res.data.month_day_count,//[150, 230, 224, 218, 135, 147, 260],
              type: "line",
            },
          ],
        };
      } else if (this.type == 2) {
        option = {
          xAxis: {
            type: "category",
            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          },
          yAxis: {
            type: "value",
          },
          series: [
            {
              data: [10, 130, 24, 118, 135, 107, 60],
              type: "line",
            },
          ],
        }
      }
      option && myChart.setOption(option);
    },
  },
};
</script>
<style lang="less" scoped>
.card1 {
  background-color: #e76f51;
}
.card2 {
  background-color: #f4a261;
}
.card3 {
  background-color: #e9c46a;
}
.card4 {
  background-color: #2a9d8f;
}
.body_card{
  border-radius: 10px !important;
  margin-top: 15px;
}
.fengexian {
  height: 60px !important;
}
</style>
